<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">防抖</button>
    <button id="btn2">节流</button>

    <script>
        // 防抖
        let timer = null
        document.getElementById('btn1').onclick = function () {
            if (timer !== null) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                console.log('防抖');
            }, 1000)
        }

        // 防抖
        let timers = null
        document.getElementById('btn2').onclick = function () {
            if (timers !== null) {
                return
            }
            timers = setTimeout(() => {
                console.log('节流');
                timers = null
            }, 1000);
        }

        // 事件循环
        // console.log(1);
        // setTimeout(() => {
        //     console.log(2);
        // }, 0);
        // new Promise((res) => {
        //     console.log(3);
        //     res()
        // }).then(() => {
        //     console.log(4);
        // }).finally(() => {
        //     console.log(5);
        // })
        // console.log(6);
        // 1 3 6 4 5 2

        // function fn() {
        //     console.log(arguments);
        // }
        // fn(1, 2, 3)



        // for (let i = 0; i < 5; i++) {
        //     setTimeout(() => {
        //         console.log(i);
        //     }, 0)
        // }


        // const obj = {
        //     a: 1,
        //     b: {
        //         a: '你好'
        //     }
        // }
        // function fn(a, b) {
        //     console.log(this);
        //     console.log(a + b);
        // }
        // fn.call(obj, 1, 1)

        // class(es6)
        class Phone {
            constructor(color, price) {
                this.color = color
                this.price = price
            }

            play() {
                console.log('我可以玩游戏!');
            }
            call() {
                console.log('我可以打电话!');
            }
        }
        const shouji = new Phone('黑色', 1999)
        console.log(shouji);
        shouji.play()
        shouji.call()

        // es5
        function phone(color, price) {
            this.color = color
            this.price = price
        }
        phone.prototype.call = function () {
            console.log('我可以打电话');
        }
        phone.prototype.play = function () {
            console.log('我可以玩游戏');
        }
        const xiaomi = new phone('黑色', 3999)
        console.log(xiaomi);
        xiaomi.call()
        xiaomi.play()

        class Phone1 {
            get price() {
                console.log('价格被读取了');
            }

            set price(price) {
                console.log('价格被修改了');
            }
        }
        let s = new Phone1()
        s.price = 999

        class Person {
            name;
            #age;
            #weight;
            constructor(name, age, weight) {
                this.name = name;
                this.#age = age;
                this.#weight = weight;
            }
            intro() {
                console.log(this.name);
                console.log(this.#age);
                console.log(this.#weight);
            }
        }
        const girl = new Person('小红', 18, 45)
         console.log(girl.name);
        // girl.intro()
    </script>
</body>

</html>